import React, { useState } from 'react';
import { Menu, MenuItem, Fab } from '@mui/material';
import { Add as ContentAdd } from '@mui/icons-material';
import Tooltip from '../../general/Tooltip';

interface NetPyNENewPlotProps {
  handleClick: (plotName: string) => void;
  [key: string]: any;
}

const plotTypes = [
  { key: 'iplotTraces', label: 'Traces Plot' },
  { key: 'iplotRaster', label: 'Raster Plot' },
  { key: 'iplotSpikeHist', label: 'Spike Histogram Plot' },
  { key: 'iplotSpikeStats', label: 'Spike Stats Plot' },
  { key: 'iplotRatePSD', label: 'PSD Rate Plot' },
  { key: 'iplotLFP', label: 'LFP Plot' },
  { key: 'iplot2Dnet', label: '2D Network Plot' },
  { key: 'iplotConn', label: 'Network Connectivity Plot' },
  { key: 'granger', label: 'Granger Causality Plot' },
  { key: 'plotRateSpectrogram', label: 'Rate Spectrogram Plot' },
];

const NetPyNENewPlot: React.FC<NetPyNENewPlotProps> = ({ handleClick, ...otherProps }) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
    event.preventDefault();
    setAnchorEl(event.currentTarget);
  };

  const handleMenuItemClick = (plotName: string): void => {
    handleClick(plotName);
    setAnchorEl(null);
  };

  return (
    <div>
      <Tooltip title="Add new plot" placement="top">
        <Fab
          size="small"
          color="primary"
          onClick={handleButtonClick}
          sx={{ borderRadius: '50%' }}
        >
          <ContentAdd style={{ color: 'white' }} />
        </Fab>
      </Tooltip>

      <Menu
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
      >
        {plotTypes.map((plot) => (
          <MenuItem
            key={plot.key}
            value={plot.key}
            onClick={() => handleMenuItemClick(plot.key)}
          >
            {plot.label}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
};

export default NetPyNENewPlot;

